<template>
	<view>
		<!-- 视频上传预览区域 -->
		<view class="videoPublish">
			<view v-if="!uploadStatus" class="upload" @click="uploadImg">
				<image src="@/static/images/other/upload.png"></image>
			</view>
			<view class="imgShow">
				<image v-if="uploadStatus" mode="aspectFit" :src="imgUrl"></image>
			</view>
		</view>
		
		<!-- 中文展示区域 -->
		<!-- <view class="show">
			<view class="top">中文</view>
			<view class="content">{{chineseContent}}</view>
		</view> -->
		<!-- 英文展示区域 -->
		<view class="show">
			<view class="top">英文</view>
			<view class="content">{{englishContent}}</view>
		</view>
		<!-- 发布按钮 -->
		<view class="button" @click="tess4J()">
			<button size="mini" type="default">开始识别</button>
		</view>
		
		<!-- 弹窗提示--请先上传图片 -->
		<uni-popup ref="message" type="message">
			<uni-popup-message type="warning" :duration="2000" :message="message"></uni-popup-message>
		</uni-popup>
		<!-- 弹窗提示--加载中 -->
		<uni-popup ref="loadUp" :is-mask-click="false">
			<view class="popup-content" >
				<image mode="widthFix" src="../../static/images/other/load2.gif"></image>
			</view>
		</uni-popup>
		
		<!-- 提示信息弹窗 -->
		<popup ref="popup"></popup>
	</view>
</template>

<script>
	import popup from "@/components/popup.vue";
	import {translate} from "@/api/file.js";
	export default {
		components:{popup},
		data() {
			return {
				uploadStatus:false,
				imgUrl:"",
				chineseContent:"请先上传图片！",
				englishContent:"Please upload pictures first!",
				themeColor:"",
				themeColorLess:"",
				message:"请先上传图片",
				filePath:'',
			};
		},
		methods:{
			uploadImg(){
				const that = this;
				uni.chooseImage({
					count:1,
					success: (chooseImageRes) => {
					    // 获取的格式是数组，多选会同时返回，单选只返回一项
					    const tempFilePaths = chooseImageRes.tempFilePaths;
						that.filePath = tempFilePaths[0];
					    // 上传文件
					    uni.uploadFile({
					        url: 'http://8.140.154.128:8847/client/file/upload', 
					        filePath: tempFilePaths[0],
					        name: 'file',
					        formData: {
					            'user': 'test'  // 上传附带参数
					        },
					        success: (uploadFileRes) => {
					            // 根据接口具体返回格式   赋值具体对应url
								let ans = JSON.parse(uploadFileRes.data);
								console.log("upload",ans);
								if (ans.code != 200) {
									this.$refs.popup._popError(ans.error);
									return;
								}
								that.imgUrl = ans.data;
								that.uploadStatus = true;
					        }
					    });
						
					}
				})
			},
			
			
			async tess4J(){
				if (!this.uploadStatus) {
					this.message = "请先上传图片",
					this.$refs.message.open();
					return;
				}
				let that = this;
				// 图像识别
				uni.uploadFile({
				    url: 'http://8.140.154.128:8847/client/file/tess4J',
				    filePath: that.filePath,
				    name: 'file',
				    formData: {
				        'language': 'eng'  // 上传附带参数
				    },
				    success: (uploadFileRes) => {
				        // 根据接口具体返回格式   赋值具体对应url
						let ans = JSON.parse(uploadFileRes.data);
						console.log("tess4J",ans);
						if (ans.code != 200) {
							this.$refs.popup._popError(ans.error);
							return;
						};
						that.englishContent = ans.data;
				    }
				});
			},
			
			
			async translate(){
				const that = this;
				if (!this.uploadStatus) {
					this.message = "请先上传图片",
					this.$refs.message.open();
					return;
				}
				if (that.englishContent == null || that.englishContent.length == 0) {
					this.message = "识别英文为空",
					this.$refs.message.open();
					return;
				}
				this.$refs.loadUp.open();
				let ans = (await translate(that.englishContent)).data;
				console.log(ans);
				that.chineseContent = ans.data;
				this.$refs.loadUp.close();
			}
			
		},
		onLoad(){
			//获取主题颜色
			let color = uni.getStorageSync("color");
			this.themeColor = JSON.parse(color).themeColor;
			this.themeColorLess = JSON.parse(color).themeColorLess;
		},
		
		
	}
</script>

<style lang="scss">
	page{
		background-color: $bg-color;
	}
	
	// 视频上传预览区域
	.videoPublish{
		width: 100%;
		height: 400rpx;
		margin-top: 40rpx;
		.upload{
			margin: 0 $both-sides;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			border: solid 4rpx #F1F1F1;
			
			image{
				width: 200rpx;
				height: 200rpx;
			}
		}
		.imgShow{
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			image{
				max-width: 100%;
				max-height: 100%;
			}
		}
		
	}
	
	//中英文展示
	.show{
		margin: 40rpx $both-sides 0 $both-sides;
		background-color: white;
		border-radius: 16rpx;
		box-shadow: 0 0 16rpx -8rpx black;
		display: flex;
		flex-direction: column;
		
		.top{
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			color: #565656;
			border-bottom: solid $border-color $border-size;
		}
		
		.content{
			padding: 20rpx;
			font-size: 28rpx;
		}
	}
	
	
	//发布按钮
	.button{
		padding: 0 $both-sides;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 50rpx;
		
		button{
			color: white;
			background-color: #4C59F8;
		}
	}
	
	//弹窗提示--加载中
	.popup-content{
		
		image{
			width: 200rpx;
		}
	}
	
</style>
